import { Check } from "lucide-react"

export default function Card({ feature = {} }) {
    const {
        title = '',
        description = '',
        features = [
        ],
        imgUrl = "",
    } = feature

    return (
        <div className="w-full">
            <div className="hidden md:block">
                <div className="space-y-2">
                    <div className="text-xl font-bold">{title}</div>
                    <div className="border border-[#eee]"></div>

                </div>
                <div className="p-6">
                    <div className="block md:flex gap-6 space-y-4">
                        <div className="space-y-4 text-sm md:w-[70%]">
                            <p className="pt-4 text-sm">
                                {description}
                            </p>
                            {features.map((feature, index) => (
                                <div key={index} className="flex whitespace-pre-line gap-2 text-[#333]">
                                    <Check className="h-5 w-5 mt-1 flex-shrink-0" />
                                    <div>
                                        <p className="font-bold">{feature.title}</p>
                                        <p className="text-gray-600">{feature.description}</p>
                                    </div>
                                </div>
                            ))}
                            <p className="text-xs text-gray-500 mt-4">{feature.tips}</p>
                        </div>
                        <div className="w-full rounded-2xl md:w-[30%]">
                            <img
                                src={imgUrl}
                                alt="Cloud Storage Illustration"
                                className="rounded-2xl h-[16rem] w-full"
                            />
                        </div>
                    </div>
                </div>
            </div>

            <div className="block md:hidden">
                <div className="space-y-4">
                    <div className="border border-[#eee]"></div>
                    <div className="font-bold">{title}</div>
                    <div className="w-full rounded-2xl md:w-[30%]">
                        <img
                            src={imgUrl}
                            alt="Cloud Storage Illustration"
                            className="rounded-2xl h-[16rem] w-full"
                        />
                    </div>
                </div>
                <div className="">
                    <div className="block md:flex gap-6 space-y-4">
                        <div className="space-y-4 text-sm md:w-[70%]">
                            <p className="pt-4 text-sm">
                                {description}
                            </p>
                            {features.map((feature, index) => (
                                <div key={index} className="whitespace-pre-line flex flex-col space-y-1 text-[#333]">
                                    <p className="font-bold">{feature.title}</p>
                                    <p className="text-gray-600">{feature.description}</p>
                                </div>
                            ))}
                            <p className="text-xs text-gray-500 mt-4">{feature.tips}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
